<template>
  <el-container class="main-layout">
    <el-aside width="200px">
      <el-menu
        router
        :default-active="route.path"
      >
        <el-menu-item index="/workflows">
          <el-icon><List /></el-icon>
          <span>工作流列表</span>
        </el-menu-item>
        <el-menu-item index="/admin/templates">
          <el-icon><Setting /></el-icon>
          <span>模板管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { List, Setting } from '@element-plus/icons-vue'

const route = useRoute()
</script>

<style scoped lang="scss">
.main-layout {
  height: 100vh;
  
  .el-aside {
    background: #f5f7fa;
    border-right: 1px solid #e6e6e6;
  }
  
  .el-menu {
    border-right: none;
  }
}

.dark {
  .el-aside {
    background: #2b2b2b;
    border-color: #4c4d4f;
  }
}
</style> 